<template>
    <div>
        <Header ></Header>
        <Swiper :list="swiperList"></Swiper>
        <Icons :iconList="iconList"></Icons>
        <Recommend :list="recommendList"></Recommend>
        <Weekend :list="weekendList"></Weekend>
    </div>
</template>

<script>
import Header from './components/header'
import Swiper from './components/swiper'
import Icons from './components/icons'
import Recommend from './components/recommend'
import Weekend from './components/Weekend'
import axios from 'axios'
import {mapState} from 'vuex'
export default {
    name: 'Home',
    data(){
        return{
            swiperList:[],
            iconList:[],
            recommendList:[],
            weekendList:[],
            lastcity:''
        }
    },
    components:{
        Header,
        Swiper,
        Icons,
        Recommend,
        Weekend
    },
    computed:{
        ...mapState(['cityname'])
    },
    mounted(){
        this.lastcity=this.cityname
        this.getInfo();
    },
    activated(){
        if(this.lastcity !== this.cityname){
           this.lastcity=this.cityname
           this.getInfo();
        }
       
    },
    methods:{
        getInfo(){
            axios.get('/api/index.json')
                .then(res=>{
                    res=res.data;
                    if(res.req){
                        this.swiperList=res.data.swiperList;
                        this.iconList=res.data.iconList;
                        this.recommendList=res.data.recommendList;
                        this.weekendList=res.data.weekendList;
                    }
                   
                })
        }
    }
}
</script>

<style scoped>

</style>
